<div th:fragment="control_chart_gridbar">
    <script type="text/javascript">
        // 示例数据
        var get_gridbar_option = function () {
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        animation: false
                    }
                },
                legend: {
                    data: [],
                    x: 'center'
                },
                color: ["#02af6d", "#58abf9", "#d79de3", "#f9be58", "#b5ea7c", "#fa9c7d", "#01bc6f", "#60C0DD", "#D7504B", "#C6E579", "#F4E001", "#26C0C0"],
                grid: [],
                yAxis: [],
                xAxis: [],
                series: [],
                type:"gridBar",
                "sql": ""
            };
        }


        /** 条形图元数据 */
        function metadata_gridbar(params) {
            var res_to_option = new resToOption();
            var opt = get_gridbar_option();// 每个视图创建新的option，防止相互污染
            opt.GridSettings = {
                top: 20,
                right: 0,
                bottom: 20,
                left: 4
            };
            var result = {
                state: "true",
                type: "gridBar",
                yAxis: ["药品收入", "医疗收入", "诊疗收入", "药占比"],
                series: [{name: "一级医院", list: [123, 123, 234, 12]}, {name: "二级医院", list: [123, 432, 123, 22]}, {name: "三级医院", list: [43, 12, 453, 53]}],
                legend: ["一级医院", "二级医院", "三级医院"]
            };
            opt = res_to_option.getOption(result, opt);

            params = $.extend({}, {
                GRID: {},
                X_Y_AXIS: {},
                DATASET: {},
                OPTION: opt
            }, params);
            return $.extend(new metadata_chart_common(params), this);
        }

        /** 条形图 元数据视图 面板视图 */
        function metadata_view_gridbar(control) {
            var res_to_option = new resToOption();
            this.DATASET = function () {
                var view = $($("#DATASET").html());
                var _this = this;
                var option = this.control.getMetadata("OPTION");
                var grid = this.control.getMetadata("GRID");
                var sql = option.sql;

                view.find("textarea").html(sql);
                view.on("keyup", "textarea", function () {
                    var sql = $(view).find("textarea").val();
                    option.sql = sql;
                    _this.linkViewOption(option);
                });

                //SQL执行按钮
                view.on("click", ".sql-btn", function () {
                    var sql = $(view).find("textarea").val();
                    option.sql = sql;
                    queryChartBySql(sql, "gridBar", function (result) {
                        option = res_to_option.getOption($.extend({},result,{type:"gridBar"}), option);
                        _this.linkViewOption(option);
                    });
                });
                view.find(".add-btn").parent().remove();
                $(this.settingPanel).append(view);
            }
            this.GRID = function () {
                var view = $($("#GRID").html());
                var _this = this;
                var option = this.control.getMetadata("OPTION");
                // 初始化输入框的值
                var grid = option.GridSettings;

                $(view).find("input[position]").each(function (i, item) {
                    var position = $(item).attr("position");
                    var value = grid[position];
                    $(item).val(value).on("keyup", function () {
                        grid[$(this).attr("position")] = $(this).val();
                        option.GridSettings = grid;
                        option.grid = res_to_option.getOption({
                            funcName: "setOptionGrid",
                            params: {grid:grid,len:option.series.length},
                            type: "gridBar"
                        }, option);
                        _this.linkViewOption(option);
                    }).popoverBind();
                });

                $(view).find("tr:eq(2)").remove();
                $(this.settingPanel).append(view);
            };
            this.X_Y_AXIS = $.noop;
            return $.extend(new metadata_view_chart_common(control), this);
        }

        /** 条形图 表单视图 */
        function metadata_form_view_gridbar(control) {
            return $.extend(new metadata_form_view_chart_common(control), this);
        }
    </script>
    <!-- 控制面板 图表 画布 -->
</div>